<template>

<!-- -->
  <div class="basic-container">
    <div class="basic-container-inner" v-if="infoObj">
      <div class="detail-title">
        <div class="title-base">{{ infoObj.examName }}</div>
        <div class="tags">训练</div>
      </div>
      <div class="detail-inner">
        <div class="detail-inner-box">
          <div class="detail-inner-box-left">
            <div class="title" @click="aaa">
              题目详情
            </div>
            <div class="content-box">
              <div class="video-box">

                <videoPlay
                  width="100%"
                  height="100%"
                  ref='videoPlayer'
                  muted
                  @timeupdate="timeupdateFun"
                  :src="infoObj.videoUrl"/>
              </div>
              <div class="video-des">
                <div class="list-des">上传人：{{ infoObj.userName }}</div>  
                <div class="list-des">上传时间：{{ infoObj.creatTime }}</div>  
                <div class="list-des">视频时长：{{ infoObj.videoTime }}s</div>  
                <div class="list-des">佣金：暂无哦</div>
              </div>
              <div class="content-detail-box">
                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  题干
                </div>
                <div class="detail-box-des" v-if="examText"> {{ examText }}</div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>
                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  重要知识点
                </div>
                <div class="detail-box-des" v-if="pointsLists.length > 0">
                  <div v-for="(item,index) in pointsLists" :key="index">
                    <p style="font-size: 14px;font-weight: 600;">{{index + 1}}、{{ item.title }}</p>
                    <p>{{item.content }}</p>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  评分卡
                </div>
                <div class="detail-box-des" v-if="scoreCardLists.length > 0">
                  <div class="point-box">
                    <div
                      class="point-list flex"
                      v-for="(item, index) in scoreCardLists"
                      :key="index"
                    >
                      <div class="point-des">{{ item.scoringCriteria }}</div>
                      <div :class="'flex-center point-current point-current' + item.point">{{ item.score }}分</div>
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  自检卡
                </div>
                <div class="detail-box-des" v-if="selfInspectionCardLists.length > 0">
                  <div class="point-box">
                    <div
                      class="point-list flex selfBg"
                    >
                      <div class="point-des" style="padding-left: 4px;">物资物品</div>
                      <div :class="'flex-center point-current point-current'">数量</div>
                    </div>
                    <div
                      class="point-list flex"
                      v-for="(item, index) in selfInspectionCardLists"
                      :key="index"
                    >
                      <div class="point-des">{{ item.specificRequirement }}</div>
                      <div :class="'flex-center point-current point-current' + item.point">{{ item.count }}</div>
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>

                <div class="detail-box-title">
                  <span class="icon iconfont icon-star"></span>
                  提示卡
                </div>
                <div class="detail-box-des" v-if="cueCardLists.length > 0">
                  <div
                    class="details-list"
                    v-for="(item, index) in cueCardLists"
                    :key="index"
                  >
                    <div class="details-title">{{ item.cueContent }}</div>
                    <div>
                      <!-- <div class="details-des">{{ item.examText }}</div> -->
                      <!-- <div class="details-des" v-for="(items, indexs) in item.desArr" :key="indexs">{{ items }}"</div> -->
                    </div>
                  </div>
                </div>
                <div class="detail-box-des detail-box-des-noData" v-else>暂无</div>
              </div>
            </div>
          </div>
          <div class="detail-inner-box-left detail-inner-box-right">
            <div class="title">
              点评点 
            </div>
            <div class="content-box content-box2">
              <div v-if="list.length == 0 && beginDianPing === false" class="noDianPing">
                
                <div class="no-title">暂无点评点</div>
                <a-button @click="dianPingStart" type="primary" ghost size="large" shape="round" style="display: flex;align-items: center;">
                  <span class="icon iconfont icon-add" style="padding-right: 6px;font-size: 12px;"></span>
                  插入点评点
                </a-button>
              </div>
              <div>
                <div class="btn-box" v-if="beginDianPing == false && list.length > 0">
                  <a-button @click="dianPingStart" type="primary" ghost size="large" shape="round" style="display: flex;align-items: center;justify-content: center;width: 100%">
                    <span class="icon iconfont icon-add" style="padding-right: 6px;font-size: 12px;"></span>
                    插入点评点
                  </a-button>
                </div>
                <div v-if="beginDianPing == true" class="beginDianPingBox">
                  <div class="dianPing1">
                    <p class="innerTitle">点评点1</p>
                    <div class="img-box">
                      <img src="" alt="" />
                      <p>{{ translateTime(currentTime) }}</p>
                    </div>
                  </div>
                  <div class="dianPing1">
                    <p class="innerTitle">点评时长</p>
                  </div>
                  <div class="dianPing1">
                    <p :class="'count-item-des ' + (activeTime == item ? 'active-time' : '')" v-for="(item) in timeLengths" :key="item" @click='activeTime = item'>{{ item }}s</p>
                  </div>
                  <div class="dianPing1">
                    <p class="innerTitle">语音备注</p>
                    <a-button @click="luzhi" type="primary" ghost size="large" shape="round" style="display: flex;align-items: center;justify-content: center;height: 36px;font-size: 14px; line-height: 36px">
                      {{ lookVoiceUrl ? '重新录制语音' : '点击录制语音'}}
                    </a-button>
                  </div>
                  <div class="dianPing1" v-if="lookVoiceUrl">
                    <audio controls ref="audio" muted="muted" :src="lookVoiceUrl" id="audio"></audio>
                   
                  </div>
                  <div class="dianPing1">
                    <p class="innerTitle">备注</p>
                  </div>
                  <div class="dianPing1">
                    <a-textarea v-model:value="remark" placeholder="备注" allow-clear />
                  </div>
                  <div class="dianPing1">
                    <a-button @click="beginDianPingHandle" type="primary" size="large" shape="round" style="display: flex;align-items: center;justify-content: center;width: 100%">
                      保存点评点
                    </a-button>
                  </div>
                </div>
                <div class="dianPingBox" v-if="list.length > 0">
                  <div class="dian-ping-title">
                    <p>点评点数量</p>
                    <p>{{ list.length }}</p>
                  </div>
                  <div class="count-box">
                    <p :class="'count-box-des ' + (activeDianPing == index + 1 ? 'active-dianping' : '')" v-for="(item,index) in list" :key='index' @click='changeActiveDianPing(item,index)'>{{ index + 1 }}</p>
                  </div>
                </div>
                <div class="dianPingDetail" v-if="list.length > 0">
                  <div class="dianPingList" v-for="(item,index) in list" :key='index' >
                    <div class="top">
                      <div class="top-left">
                        <p class="left1">点评点 {{ index + 1 }}</p>
                        <span class="icon iconfont icon-history"></span>
                        <p>
                          <span>{{translateTime(item.lookPointFirst)}}</span>
                          <span>-</span>
                          <span>{{translateTime(item.lookPointLast)}}</span>
                        </p>
                      </div>
                      <div class="top-right" @click='delHandle(item)'>
                        <span class="icon iconfont icon-shanchu"></span>
                      </div>
                    </div>
                    <div class="remark-box">
                      {{ item.remark }}
                    </div>
                    <div class="remark-box" v-if="item.lookVoiceUrl">
                      <audio controls ref="audio" muted="muted" :src="item.lookVoiceUrl"></audio>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-btn">
        <a-button type="primary" size="large" shape="round">提交点评</a-button>
      </div>
    </div>
    <a-modal
      v-model:open="luzhiVisible"
      title="录制语音并上传语音"
      centered
      @ok="luzhiVisible = false"
    >
    <div style="font-size:14px">
      <h3>录音时长：{{ recorder && recorder.duration.toFixed(4) }}</h3>
      <br />
      <a-button style="margin:0 4px 4px 0" type="primary" @click="handleStart">开始录音</a-button>
      <a-button style="margin:0 4px 4px 0" type="error" @click="handlePause">暂停录音</a-button>
      <a-button style="margin:0 4px 4px 0" type="success" @click="handleResume">继续录音</a-button>
      <a-button style="margin:0 4px 4px 0" type="warning" @click="handleStop">停止录音</a-button>
      <br />
      <br />
      <h3>
        播放时长：{{
          recorder &&
            (playTime > recorder.duration
              ? recorder.duration.toFixed(4)
              : playTime.toFixed(4))
        }}
      </h3>
      <br />
      <a-button style="margin:0 4px 4px 0" type="primary" @click="handlePlay">播放录音</a-button>
      <a-button style="margin:0 4px 4px 0" type="error" @click="handlePausePlay">暂停播放</a-button>
      <a-button style="margin:0 4px 4px 0" type="success" @click="handleResumePlay">继续播放</a-button>
      <a-button style="margin:0 4px 4px 0" type="warning" @click="handleStopPlay">停止播放</a-button>
      <a-button style="margin:0 4px 4px 0" type="error" @click="handleDestroy">销毁录音</a-button>
      <a-button style="margin:0 4px 4px 0" type="primary" @click="uploadRecord">上传</a-button>
      </div> 
    </a-modal>

    <!-- 删除 -->
    <a-modal v-model:open="delVisible" centered width='400px' title="删除点评点" @ok="handleDel" >
      <p>确认是否删除该点评点</p>
    </a-modal>
    <!-- 删除 -->
  </div>
</template>
<script>
  import { getVideoList, getVideoPoint ,videoPointsSaveOrUpdate,videoPointsDelete,examinationList,examPointsList,scoreCardList,selfInspectionCardList,cueCardList } from '@/api/model/exam';
  import { message } from 'ant-design-vue';
  import 'vue3-video-play/dist/style.css'
  import { videoPlay } from 'vue3-video-play'
  import Recorder from 'js-audio-recorder'
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  import axios from 'axios'
  export default{
    components: {
      videoPlay
    },
    data(){
      return{
        // 录音 start
        recorder: null,
        playTime: 0,
        timer: null,
        src: null,
        lookVoiceUrl: '',
        // 录音 end
        videoId: '',
        infoObj: {},
        list:[],
        timeLengths: [20,40,60,90,120],
        activeTime: 20,
        currentTime: 0, //
        page:{
          current: 1,
          pageSize: 10,
          total: 0,
        },
        beginDianPing: false,
        isPause: false,
        remark:'',
        activeDianPing: 1,
        luzhiVisible: false,
        delVisible: false,
        delObj: {},

        
        examText: '',// 题干
        pointsLists: [], // 知识点
        scoreCardLists:[], //评分卡
        selfInspectionCardLists:[], //自检卡
        cueCardLists: [],//提示卡
      }
    },
    created(){
      this.videoId = this.$route.query.id
      this.recorder = new Recorder()
      this.getVideoPointHandle()
      this.getInfoHandle()

    },
    methods:{
      // 获取习题详情
      getExaminationList(id){
        examinationList({id:id}).then(res=>{
          this.examText = res.data.records[0].examText
        })
      },
      // 获取知识点
      getExamPointsList(id){
        examPointsList({id:id}).then(res=>{
          this.pointsLists = res.data.records
        })
      },
      // 获取评分卡
      getScoreCardList(id){
        scoreCardList({id:id}).then(res=>{
          this.scoreCardLists = res.data.records
        })
      },
      // 获取自检卡
      getSelfInspectionCardList(id){
        selfInspectionCardList({id:id}).then(res=>{
          this.selfInspectionCardLists = res.data.records
        })
      },
      // 获取提示卡
      getCueCardList(id){
        cueCardList({id:id}).then(res=>{
          this.cueCardLists = res.data.records
        })
      },
      timeupdateFun(ev){
        if(this.isPause == true){
          this.currentTime = ev.target.currentTime.toFixed(2)
          console.log(2222)
        }
      },
      translateTime(timeStr) {
        let minute = Math.floor((timeStr % 3600) / 60) > 9 ? Math.floor((timeStr % 3600) / 60) : '0' + Math.floor((timeStr % 3600) / 60)
        let second = Math.floor(timeStr % 60) > 9 ? Math.floor(timeStr % 60) : '0' + Math.floor(timeStr % 60)
        return `${minute}:${second}`
      },
      dianPingStart(val){
        this.beginDianPing = true
        this.isPause = true
        this.$refs.videoPlayer.pause();
        setTimeout(()=>{
          this.isPause = false
        },100)
      },
      // 删除点评点
      delHandle(item){
        this.delObj = JSON.parse(JSON.stringify(item))
        this.delVisible = true
      },
      // 确认删除
      handleDel(){
        videoPointsDelete({id: this.delObj.id}).then(res=>{
          if(res.code ==0){
            message.success('删除成功')
            this.delVisible = false
            this.getVideoPointHandle()
          }
        })
      },
      getVideoPointHandle(){
        let params = {
          commentPersonId: userStore.getUserInfo.id,
          videoId: this.videoId,
          limit: 1000,
          page: 1,
          orderSql: 'look_point_first desc',
        }
        getVideoPoint(params).then(res=>{
          this.list = res.data.records
        })
      },

      beginDianPingHandle () {
        this.beginDianPing = true
        if(!this.remark){
          message.warning('备注不能为空')
        }
         // 判断时间间隔与终止点的大小
        let params = {
          videoId: this.videoId,
          lookSecond: this.activeTime,
          lookPointLast: Number(this.currentTime),
          remark: this.remark,
          lookVoiceUrl: '',
          commentPersonId: userStore.getUserInfo.id,
          personType: 2, //1 学生 2 专家
          commentPersonName: userStore.getUserInfo.nickname,
        }
        if (this.currentTime >= this.activeTime) {
          params.lookPointFirst = Number(this.currentTime - this.activeTime.toFixed(0))
        } else {
          params.lookPointFirst = 0
        }
        if (this.lookVoiceUrl) {
          params.lookVoiceUrl = this.lookVoiceUrl
          params.lookVoiceTime = this.recorder.duration.toFixed(1)
        } else {
          delete params.lookVoiceUrl
          delete params.lookVoiceTime
        }
        console.log(params)
        videoPointsSaveOrUpdate(params).then(res=>{
          if(res.code == 0){
            message.success('点评成功')
            this.remark = ''
            this.lookVoiceUrl = ''
            this.currentTime = 0
            this.activeTime = 20
            this.beginDianPing = false
            this.getVideoPointHandle()
          }
        })
      },

      changeActiveDianPing(item, index) {
        this.activeDianPing = index + 1
      },
      // 视频详情
      getInfoHandle () {
        let params = {
          id: this.videoId
        }
        getVideoList(params).then(res=>{
          this.infoObj = res.data.records[0]
          this.getExaminationList(this.infoObj.examinationId)
          this.getExamPointsList(this.infoObj.examinationId)
          this.getScoreCardList(this.infoObj.examinationId)
          this.getSelfInspectionCardList(this.infoObj.examinationId)
          this.getCueCardList(this.infoObj.examinationId)
        })
      },

      // 录音对话框
      luzhi(){
        this.luzhiVisible = true
      },

      // 录音
      // 开始录音
      handleStart() {
        this.recorder = new Recorder()
        Recorder.getPermission().then(() => {
          console.log('开始录音')
          this.recorder.start() // 开始录音
        }, (error) => {
          message.warning('请先允许该网页使用麦克风')
          console.log(`${error.name} : ${error.message}`)
        })
      },
      handlePause() {
        console.log('暂停录音')
        this.recorder.pause() // 暂停录音
      },
      handleResume() {
        console.log('恢复录音')
        this.recorder.resume() // 恢复录音
      },
      handleStop() {
        console.log('停止录音')
        this.recorder.stop() // 停止录音
      },
      handlePlay() {
        console.log('播放录音')
        console.log(this.recorder)
        this.recorder.play() // 播放录音
  
        // 播放时长
        this.timer = setInterval(() => {
          try {
            this.playTime = this.recorder.getPlayTime()
          } catch (error) {
            this.timer = null
          }
        }, 100)
      },
      handlePausePlay() {
        console.log('暂停播放')
        this.recorder.pausePlay() // 暂停播放
  
        // 播放时长
        this.playTime = this.recorder.getPlayTime()
        this.time = null
      },
      handleResumePlay() {
        console.log('恢复播放')
        this.recorder.resumePlay() // 恢复播放
  
        // 播放时长
        this.timer = setInterval(() => {
          try {
            this.playTime = this.recorder.getPlayTime()
          } catch (error) {
            this.timer = null
          }
        }, 100)
      },
      handleStopPlay() {
        console.log('停止播放')
        this.recorder.stopPlay() // 停止播放
  
        // 播放时长
        this.playTime = this.recorder.getPlayTime()
        this.timer = null
      },
      handleDestroy() {
        console.log('销毁实例')
        this.recorder.destroy() // 毁实例
        this.timer = null
      },
      uploadRecord() {
        if (this.recorder == null || this.recorder.duration === 0) {
          message.error('请先录音')
          return false
        }
        this.recorder.pause() // 暂停录音
        this.timer = null
        console.log('上传录音')// 上传录音
  
        const formData = new FormData()
        const blob = this.recorder.getWAVBlob()// 获取wav格式音频数据
        // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
        const newbolb = new Blob([blob], { type: 'audio/wav' })
        const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
        formData.append('file', fileOfBlob)
        const url = window.URL.createObjectURL(fileOfBlob)
        this.src = '/platform-api/tool/upload/uploadMultipartFile'
        axios.post(this.src, formData).then(res => {
          this.lookVoiceUrl = res.data.url
          message.success('录音上传成功')
        })
        // const axios = require('axios')
        // axios.post(url, formData).then(res => {
        //   console.log(res.data.data[0].url)
        // })
      }
    }
  }
</script>
<style lang="less" scoped>
  p{
    margin: 0;
    padding: 0;
  }

  .basic-container{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    background: var(--osce-background-grey);

    .basic-container-inner{
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: auto;

      .detail-title{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 1152px;
        height: 64px;
        margin: 0 auto;

        .title-base{
          font-size: 24px;
          font-weight: 600;
        }

        .tags{
            height: 21px;
            margin-left: 10px;
            padding: 12px;
            padding: 0 6px;
            border-radius: 2px;
            background: rgb(253 139 8 / 30%);
            font-size: 12px;
            line-height: 21px;
          }
      }

      .detail-inner{
        display: flex;
        flex: 1;
        width: 100%;
        margin-bottom: 20px;
        overflow: auto;

        .detail-inner-box{
          display: flex;
          justify-content: space-between;
          width: 1152px;
          margin: 0 auto;
          overflow: auto;

          .detail-inner-box-left{
            display: flex;
            flex-direction: column;
            width: 610px;
            height: 100%;
            overflow: auto;
            border-radius: 12px;
            background: var(--osce--background-color);

            .title{
              padding: 20px 0 12px;
              border-bottom: 1px solid var(--osce--border-color);
              font-size: 17px;
              font-weight: 600;
              text-indent: 20px;
            }

            .content-box{
              flex: 1;
              width: 100%;
              padding: 16px 20px;
              overflow: auto;

              .video-box{
                width: 100%;
                height: 320px;
                border-radius: 6px;
                background: rgb(184 215 208);

                video{
                  width: 100%;
                  height: 100%;
                }
              }

              .video-des{
                margin-bottom: 12px;
                padding: 12px 0 6px;
                border-bottom: 1px solid var(--osce--border-color);

                .list-des{
                  padding-bottom: 8px;
                  color: var(--osce--gray-color);
                  font-size: 12px
                }
              }

              .content-detail-box{
                .detail-box-title{
                  padding-top: 16px;
                  font-size: 15px;
                  font-weight: 600;
                  line-height: 32px;

                  .iconfont {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 6rpx;
                    background: linear-gradient(90deg, #0c9 0%, #007acc 100%);
                    background-clip: text;
                    background-clip: text;
                    font-size: 44rpx;
                    -webkit-text-fill-color: transparent;
                  }
                }

                .detail-box-des{
                  font-size: 13px;
                  font-weight: 400;
                  line-height: 20px;
                }

                .detail-box-des-noData{
                  height: 40px;
                  color: var(--osce--gray-color);
                  font-size: 12px;
                  line-height: 40px;
                  text-align: center;
                }

                .point-list{
                  padding: 10px 0;
                  border-bottom: 1px solid var(--osce--border-color);

                  .point-des {
                    flex: 1;
                    padding-right: 15px;
                  }

                  .point-current {
                    width: 40px;
                    height: 24px;
                    border-radius: 2px;
                    color: var(--osce--gray-color);
                    font-size: 12px;
                    line-height: 21px;
                  }
                }

                .selfBg{
                  background: var(--osce--border-color);
                }
              }
            }

            .content-box2{
              .noDianPing{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;

                .no-title{
                  padding-bottom: 20px;
                  font-size: 15px;
                }
              }

              .btn-box{
                padding-bottom: 16px;
                border-bottom: 1px solid var(--osce--border-color);
              }

              .beginDianPingBox{
                padding: 8px 0;
                font-size: 14px;
                font-weight: 600;

                .dianPing1{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 8px 0;

                  .img-box{
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img{
                      width:66px;
                      height: 37px;
                      margin-right: 6px;
                      border-radius: 4px;
                      background:#ddd;
                    }
                  }

                  .count-item-des{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 63px;
                    height: 35px;
                    margin:0 4px 4px 0;
                    border-radius: 4px;
                    background: var(--osce--border-color);
                    font-weight: 400;
                    cursor:pointer;
                  }

                  .active-time{
                    border: 1px solid @primary-color;
                    background:var(--osce--background-color);
                  }
                 
                }
              }

              .dianPingBox{
                padding-top: 16px;
                
                .dian-ping-title{
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 15px;
                  font-weight: 600;
                }

                .count-box{
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding: 16px 0;

                  .count-box-des{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 45px;
                    height: 31px;
                    margin:0 4px 4px 0;
                    padding: 0;
                    border-radius: 4px;
                    background:  var(--osce--border-color);
                    cursor: pointer;
                  }

                  .active-dianping{
                    border: 1px solid @primary-color;
                    background: var(--osce--background-color);
                  }
                }
              }

              .dianPingDetail{
                .dianPingList{
                  margin-bottom: 15px;
                  padding: 15px;
                  border: 1px solid var(--osce--border-color);
                  border-radius: 8px;

                  .top{
                    display: flex;
                    justify-content: space-between;
                    font-size: 15px;

                    .top-left{
                      display: flex;
                      flex: 1;
                      align-items: center;
                      justify-content: flex-start;

                      p{
                        margin-bottom: 0;
                      }

                      .left1{
                        padding-right: 8px;
                        font-weight: 600;
                      }

                      .iconfont{
                        padding-right: 8px;
                        color: var(--osce--border-color);
                      }
                    }

                    .top-right{
                      padding-left: 10px;
                      cursor: pointer;


                      .iconfont{
                        color: var(--osce--gray-color);
                      }
                      
                    }

                    .top-right:hover{
                      .iconfont{
                        color: @primary-color;
                      }
                    }
                  }

                  .remark-box{
                    padding: 10px 0;
                    font-size: 12px;
                    font-weight: 400;
                    list-style: 14px;
                  }
                }
              }
            }
          }

          .detail-inner-box-right{
            width: 500px;
            height: 100%;
          }
        }
      }

      .detail-btn{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 1152px;
        height: 60px;
        margin: 0 auto;
        padding-right: 20px;
        border-radius: 10px 10px 0 0 ;
        background: var(--osce--background-color);
      }
    }
  }
</style>